<template>
  <div class="brw w-full h-full pl-0px pr-0px pt-17px">
    <ProTable
      ref="tableRef"
      :columns="columns"
      :init-param="initParam"
      :request-api="getTableList"
      :border="true"
    >
      <template #tableHeader="scope">
        <el-button
          type="primary"
          size="default"
          @click="editFn('发布需求')"
          >发布需求</el-button
        >
      </template>

      <!-- 表格操作 -->
      <template #operation="scope">
        <div class="table-btn-list">
          <el-button
            type="warning"
            v-if="scope.row.status === 'UNDERWAY'"
            link
            @click="editFn('编辑需求',scope.row)"
            >编辑</el-button
          >
          <el-button type="warning" link @click="to(scope.row)">查看</el-button>
          <el-button
            type="warning"
            v-if="scope.row.status === 'UNDERWAY'"
            link
            @click="endNeedFn(scope.row)"
            >结束需求</el-button
          >
        </div>
      </template>
    </ProTable>
  </div>
  <!-- 发布需求 -->
  <PublishOrder ref="publishOrderRef" @updata="updata" />
</template>

<script setup>
import { useHandleData } from "@/hooks/useHandleData";
definePageMeta({
  middleware: ["authenticated"],
});
useHead({
  title: `需求提请表-${appTitle}`,
});

const tableRef = ref();
// 表格初始参数
const initParam = reactive({
  pageIndex: 1,
  pageSize: 10,
});
const getTableList = (params) => {
  if (params.timekey) {
    params.startCreateTime = params.timekey[0];
    params.endCreateTime = params.timekey[1];
  }
  return api.post(`/demand/queryPage`, params, {
    loading: true,
  });
};

// 表格配置项
const columns = [
  {
    label: "需求编码",
    prop: "code",
    align: "left",
    search: { el: "input", showLabel: true },
  },
  { label: "需求名称", prop: "title", align: "left" },
  {
    label: "发布时间",
    prop: "createTime",
    align: "left",
    minWidth: 140,
    search: {
      el: "date-picker",
      span: 2,
      key: "timekey",
      showLabel: true,
      props: {
        clearable: true,
        type: "datetimerange",
        valueFormat: "YYYY-MM-DD HH:mm:ss",
      },
    },
  },
  { label: "结束时间", prop: "cutoffDate", align: "left", minWidth: 140 },
  {
    label: "状态",
    prop: "status",
    align: "left",
    enum: needStatus,
    search: { el: "select", showLabel: true },
  },
  { label: "参与数", prop: "participantCount", align: "left" },
  {
    prop: "operation",
    label: "操作",
    align: "center",
    fixed: "right",
    width: 200,
  },
];

// 更新数据
const updata = () => {
  tableRef.value.getTableList();
};

// 发布需求
const publishOrderRef = ref();
const editFn = (t,row) => {
  publishOrderRef.value.show(t, row);
};

// 结束需求
const endNeedFn = (row) => {
  useHandleData(() => api.get(`/demand/close/${row.id}`), "结束该需求").then(
    () => {
      updata();
    }
  );
};

const to = (row) => {
  navigateTo({ path: "need/detail", query: { id: row.id } });
};
</script>
